import {nanoid} from 'nanoid'
import React, { PureComponent } from 'react'
import Footer from '../Footer/Footer'
import Header from '../Header/Header'
import List from '../List/List'
import './index.css'
export default class TodoList extends PureComponent {
    state = {
        todos:[
            {
                id:1,
                title:'吃饭',
                isDone:false
            },
            {
                id:2,
                title:'睡觉',
                isDone:true
            },
            {
                id:3,
                title:'打豆豆',
                isDone:true
            }
        ]
    }
    // 添加todo
    addTodo(title){
        // 1. 获取子组件header中的输入内容title
        console.log('TodoList : ',title)
        // 2. 拼一个新的todo对象
        const todo = {
            id:nanoid(),
            title,
            isDone:false
        }
        // 3. 加入数组，并执行setState触发更新
        this.setState({
            todos:[todo, ...this.state.todos]
        })
    }
    // 根据id删除todo
    deleteById(id){
        if(!window.confirm('确定要删除么?')) return;
        // 根据id删除，其实就是保留下，id不相等的记录
        let newTodos = this.state.todos.filter(item=>item.id !== id)
        // 重置状态数据
        this.setState({
            todos:newTodos
        })
    }

    // checkedOne切换 id条记录的 isDone属性
    // 方式一：
    // checkedOne(id, isDone){
    //     console.log('TodoList id: ', id)// 1
    //     console.log('isDone: ', isDone)// true
    //     let newTodos = this.state.todos.map(todo=>{
    //         // 如果是当前的todo，那么修改isDone
    //         if(todo.id === id){
    //             todo.isDone = isDone
    //         }
    //         return todo
    //     })
    //     this.setState({
    //         todos: newTodos
    //     })
    // }

    // 方式二：
    checkedOne(todo){
        todo.isDone = !todo.isDone
        // console.log(this.state.todos)
        this.setState({
            todos:[...this.state.todos]
        })
    }

    // checkedAll
    checkedAll(isDone){
        console.log('isDone: ', isDone)
        // 使用isDone 去修改todos数组中每一个todo 的isDone属性即可
        this.setState({
            todos:this.state.todos.map(todo=>{
                todo.isDone = isDone
                return todo
            })
        })

        // let newTodos = this.state.todos.map(todo=>{
        //     todo.isDone = isDone
        //     return todo
        // })
        // this.setState({
        //     todos:newTodos
        // })
    }

    // 删除已完成
    deleteDone(){
        this.setState({
            todos:this.state.todos.filter(todo=>!todo.isDone)
        })
    }

    render() {
        let {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo.bind(this)}/>
                    <List checkedOne={this.checkedOne.bind(this)} todos={todos} deleteById={this.deleteById.bind(this)}/>
                    <Footer deleteDone={this.deleteDone.bind(this)} todos={todos} checkedAll={this.checkedAll.bind(this)}/>
                </div>
            </div>
        )
    }
}
